<template>
	<view
		class="tab-list"
		:style="{ top: stickyTop + 'rpx' }"
	>
		<view
			class="tab-item"
			v-for="(item, index) in list"
			:key="index"
			:class="[{ active: active === index }]"
			@tap="tabChange(index)"
		>
			<image class="image" mode="widthFix" :src="item.pic" v-if="item.showType === 1"></image>
			<text class="text" v-else>{{ item.label }}</text>
			<view class="line"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Tab',
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		index: {
			type: Number,
			default: () => {
				return 0;
			}
		},
		stickyTop: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			active: 0
		};
	},
	computed: {
		scrollLeft() {
			return (this.active - 1) * 45;
		}
	},
	watch: {
		index: {
			immediate: true,
			handler(val) {
				this.active = val;
			}
		}
	},
	methods: {
		tabChange(index) {
			this.active = index;
			this.$emit('tabChange', index);
		}
	}
};
</script>

<style lang="scss" scoped>
.tab-list {
	width: 100%;
	position: sticky;
	padding: 16rpx 12rpx;
	box-sizing: border-box;
	@include flexBox(space-around);
background: #F6F7FA;
	.tab-item {
		min-width: 80rpx;
		padding: 0 18rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		transition: 0.5s;
		border-radius: 8rpx;
		color: #9A9A9A;
		.image {
			width: 86rpx;
			height: 38rpx;
		}
		.line {
			width: 60rpx;
			height: 12rpx;
			transition: 0.3s;
			margin: 10rpx auto 0;
			border-radius: 50rpx;
			margin-top: -16rpx;
		}
		&.active {
			color: #333333;
			font-weight: 600;
			font-size: 30rpx;
			.line {
				background: $main-color;
			}
		}
	}
}
</style>
